<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>足迹管理</span>
      </div>
    </template>
    <el-table :data="tableData" style="width: 100%" max-height="330">
      <el-table-column type="index" label="序号" width="120" />
      <el-table-column prop="article_title" label="文章标题" width="150" />
      <el-table-column prop="pos" label="足迹" width="100" />
      <el-table-column prop="article_description" label="文章描述" width="110">
        <template #default="scope">
          <h1 class="text-ellipsis h-7 truncate ...">{{ scope.row.article_description }}</h1>
        </template>
      </el-table-column>
      <el-table-column prop="article_cover" label="封面" width="200">
        <template #default="scope">
          <el-image style="width: 120px; height: 70px" :src="scope.row.article_cover" fit="fill"
            :preview-src-list="[scope.row.article_cover]" :initial-index="0" :preview-teleported="true">
            <template #error>
              <div class="image-slot">
                <el-icon><icon-picture /></el-icon>
              </div>
            </template>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="发布时间" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon>
              <timer />
            </el-icon>
            <span class="text-ellipsis h-6 truncate ...">{{ scope.row.createdAt }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="选项" width="180">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="addpos(scope.row)">添加足迹</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :currentPage="allcurrentPage" :pageSize="allpageSize" :total="alltotal" @updatepage="Allchangepage">
    </pagination>
    <el-dialog v-model="dialogFormVisible" title="发布文章" append-to-body width="70%">
      <el-input v-model="input" placeholder="输入地点" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetForm()">取消</el-button>
          <el-button type="primary" @click="tosubmit()">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup>
import { ref, onMounted,inject } from "vue"
import { getarticle, getposlistarticle, subposition } from "@/api/article"
import moment from "moment"
import pagination from "@/components/pagination.vue"
/* 全部文章数据的分页 */
const allcurrentPage = ref(1)
let reload = inject('reload')
const allpageSize = ref(6)
const alltotal = ref(0)
let dialogFormVisible = ref(false)
const input = ref('')
const articleid = ref(0)
const tableData = ref([
  {
    article_title: '2016-05-03',
    article_description: 'Tom',
    createdAt: "2023-03-06",
    article_cover: 'http://img.mrzym.top/FtAnnRvDr78EeHrSJc9IM3fabRiN',
    pos: "",
    id: 0
  },
])
async function Allchangepage(val) {
  allcurrentPage.value = val
  await getarticles()
}
function addpos(row) {
  console.log(row);
  articleid.value = row.id
  input.value = ""
  dialogFormVisible.value = true
}

function resetForm() {
  input.value = ""
  articleid.value = ""
  dialogFormVisible.value = false
}
async function tosubmit() {
  if (input.value.length > 0) {
    let res = await subposition({
      pos: input.value,
      article_id: articleid.value
    })
    console.log(res);
    if (res.data.status == 200) {
      ElMessage({
        message: '添加成功',
        type: 'success',
      })
    } else {
      ElMessage({
        message: res.data.message,
        type: 'warning',
      })
    }
    resetForm()
    reload()
  } else {
    ElMessage({
      message: '输入信息哦',
      type: 'warning',
    })
  }
}
onMounted(async () => {
  await getarticles()
})
async function getarticles() {
  let alldata = await getposlistarticle({
    page: allcurrentPage.value,
    pageSize: allpageSize.value,
  })
  if (alldata.data.status === 200) {
    alltotal.value = alldata.data.data.count
    console.log(alldata.data.data.articlelist);
    tableData.value = alldata.data.data.articlelist.map((item) => {
      return {
        article_title: item.article_title,
        article_description: item.article_description,
        createdAt: moment(item.createdAt).format('YYYY-MM-DD HH:mm:ss'),
        article_cover: item.article_cover,
        pos: item.pos,
        id: item.id,
      }
    })
  }
} 
</script>

<style lang="css" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:deep(.el-card__header) {
  padding: 5px 10px !important;
}

:deep(.el-table .el-table__cell) {
  padding: 0px 0px !important;
}

.demo-image__error .image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
</style>